<template>
	<div class="icon-item" :class="{selected:props.item.selected}" @contextmenu="onContextmenu($event)" >
		<div class="icon-body" @click="onClick($event)" @dblclick="onDblclick()" @dragstart="onDragstart()" @dragend="onDragend()" draggable="true">
			<div class="icon" :class="props.item.icon"></div>
			<div class="text">{{ props.item.name }}</div>
		</div>
	</div>
</template>

<script setup>
	import {defineProps,ref,onMounted,computed,defineEmits} from 'vue';
	import coreStore from '../stores/core.js';
	
	const $coreStore = coreStore();
	
	const props = defineProps({
		item: Object,
		order: Number
	});
	onMounted(()=>{
		
	})
	const onMousedown = function(event) {
		
	}
	const onContextmenu = function(event) {
		$coreStore.showContextMenu(event.clientX,event.clientY,'icon',props.item);
	}
	const onClick = function() {
		$coreStore.selectIcon(props.item.id);
		//$store.dispatch('core/selectIcon',props.item.id)
	}
	const onDblclick = function() {
		$coreStore.openApplication(props.item.id);
		//$store.dispatch('core/openApp',props.item.id)
	}
	const onDragstart = function() {}
	const onDragend = function() {}
</script>

<style lang="less" scoped>
.icon-item {
	&.selected {
		.icon-body {
			background: rgba(0, 134, 255, 0.27);
		}
	}
	&.dragging {
		opacity: 0.6;
	}
	.icon-body {
		border-radius: 4px;
		width: 90px;
		.icon {
			height: 80px;
			width: 100%;
			margin: 0 auto;
			background-size: 64px;
		}
		.icon:active{
			animation: heartBeat 2s;
		}
		.text {
			min-height: 20px;
			line-height: 20px;
			text-align: center;
			/*margin:0 -10px; */
			overflow: hidden;
			word-wrap: break-word;
			word-break: break-all;
			text-overflow: ellipsis;
			padding-bottom: 5px;
			color: #FFFFFF;
			text-shadow: 2px 2px 2px #000000;
		}
	}
	
	.icon-body:hover {
		background:rgba(43, 115, 199, 0.2);
	}
}
</style>
